<!DOCTYPE html>
<html  lang="zh-CN"
       xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.js"></script>
    <style type="text/css" rel="stylesheet">
        ul li{
            list-style: none;
            float: left;
            margin-left: 5px;
            border: 1px solid grey;
        }
        ul li:hover{
            background: red;
        }
        .pro{
            border:1px solid grey;
        }
        .all-comment{
            float: right;
        }
        .imggroups{
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
<div class="content pro">
    <div id="imggroup"></div>
    <div class="pro-img">
        <p id="pro-name"></p>
        <p>价格：￥<span id="pro-price">198</span></p>
        <span>商品描述:</span>
        <p id="pro-desc"></p>
    </div>
    <div class="pro-guige pro">
        <img id="product-img" src="" width="100px" height="100xp">
        <p><span id="selectguige">已选择规格……</span></p>
        <h5>规格/颜色：</h5>
        <ul>
            <li id="guige"></li>
        </ul>
        <br/>
        <h5>尺寸</h5>
        <ul>`
            <li id="proSize"></li>
           <li id="proLength"></li>
            <li id="proHeight"></li>
            <li id="proWidth"></li>
        </ul>
        <br/>
        <h5>数量</h5>
        <div class=" pro">
            <button type="button" value="" onclick="JianShuLian()">-</button>
            <input id="count" type="text" name="count" value="5">
            <button type="button" value="" onclick="JiaShuLian()">+</button>
        </div>
        <h5>省钱购</h5>
        <div class=" pro">
            <p>兑换劵：<span id="coupon"></span></p>
            <p>代金券：<span id="yzdianzhu"></span></p>
        </div>
    </div>

    <div class="pro-comment pro">
        <h5>商品评价：</h5>
        <div class="all-comment">查看全部</div>
        <div>
            <div id="pro-comment">第一条</div>
        </div>
    </div>
    <div id="addCart">
        <input type="button" value="购物车" onclick="addCart()"/>
        <input type="button" value="立即购买" onclick="addCart()"/>
        <input type="button" value="分享赚" onclick="addCart()"/>
    </div>

</div>
<script>
    var productId;//商品id
    var guigeId;//规格
    var productCount;//商品
    var productPrice;//商品价格
    var productGuiGe;//商品规格
    var imggroup;//图组
    var productComment;//评论
    $(function () {
        var str="";
        productId="199";
       $.ajax({
           url:"/selectProductDetailById?productId="+productId,
           success:function (result) {
               if(result.msgCode=="000000"){
                   alert("begin---->");
                   var data=result;
                   var obj=data.data;
                   $.each(obj,function (index,items) {
                        console.log(items);
                        productPrice=items.productPrice;
                        productGuiGe=items.productGuiGe;
                        productComment=items.productComment;
                       //价格
                       for (var i in productPrice) {
                           $('#pro-price').html(productPrice[i].proPrice);//
                           $('#coupon').html(productPrice[i].coupon);
                           $('#yzdianzhu').html(productPrice[i].yzDianzhu);

                       }

                       //规格
                       for(var j in productGuiGe){
                            $('#guige').html(productGuiGe[j].proColor);
                            $('#proSize').html(productGuiGe[j].proSize);
                           $('#proLength').html(productGuiGe[j].proLength);
                           $('#proHeight').html(productGuiGe[j].proHeight);
                           $('#proWidth').html(productGuiGe[j].proWidth);
                           $('#product-img').attr('src',productGuiGe[j].imgurl);
                           imggroup=productGuiGe[j].imgGroup.split(",");
                           guigeId= productGuiGe[j].guigeId;

                           alert(j);
                           // console.log(imggroup.split(","));
                            // $('.pro-imggroup').attr("src",productGuiGe[j].imgGroup);
                       }
                        //图组
                       for (var k in imggroup){
                           console.log(imggroup[k]);
                           // $('#pro-imggroup').attr('src',imggroup[2]);

                               $('#imggroup').append("<img class='imggroups' src='" +imggroup[k]+ "'>" + "</img>");



                       }

                       //评论
                       for(var n in productComment){
                           $('#pro-comment').html(productComment[n].cContent);

                       }

                   })
               }
    }
       })
    })
    
function addCart() {
        var num=$('#count').val();
        var nums=parseInt(num);
        var productIds=parseInt(productId);
        var guigeIds=parseInt(guigeId);
    alert("--id--->"+guigeIds);
    $.ajax({
        url:"/addCart?productId="+productIds+"&guigeId="+guigeIds+"&productCount="+nums,
        success:function (result) {
            alert(result);
        }
    })
}

function JianShuLian(){
        var count=$('#count').val();
        if(count>1){
           count=count-1;
           $('#count').attr('value',count);
        }else{
            count=1;
            $('#count').attr('value',count);
        }
}

function JiaShuLian() {
    var count=$('#count').val();
        var counts=parseInt(count);
        counts=counts+1;
    $('#count').attr('value',counts);
}
</script>
</body>
</html>
